Tailwind CSSのArbitrary value

元から定義されているルールを逸脱した任意の値を指定できる

Design Sytem的には、逸脱するのは好ましくないが、

その根本原因は、Tailwind CSSに起因するものではないだろう

用意したDesign Systemが貧弱

デザインカンプが、そのDesign Systemに則っていない

こういう例外が起きた時に、

「例外部分だけ素のCSSで書く」とすることなく

「全てTailwind CSSで完結できる」のは良いと思う

独特のルールが多くある模様

疑似要素が色々使える

peer

code:html

<h2 class="group-hover:underline">Hello world!</h2>

<p>Etiam facilisi eu dolor per leo ante…</p>

</a>

Context Menuを実装する際に、

「右クリックで表示するメニュー」の位置を良い感じに計算する必要があった

基本的にカーソルの右下に出てほしいが、画面の右端で行った時は左に出て欲しい

これを計算するためには、

右クリック時のカーソルの座標

viewportの幅

メニューの幅

の3つが必要になる

つまり、

メニューの幅を指定するCSS

メニューの幅を使って計算するJS

の2箇所で、メニューの幅を使う必要がある

そのため、「メニューの幅」何らかの定数で持っておくなどして